<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList,karaoke.modelo.JsonResult,karaoke.modelo.Cliente"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Karaoke.pe</title>
	
	<%@include file="scripts.jsp" %>
	<link href="css/customize.css" rel="stylesheet">
	<script src="js/validation.js"></script>
	<script src="js/scriptscustomize.js"></script>
</head>
<body class="preview" id="top">
	
	<jsp:include page="header_without_login.jsp"></jsp:include>

    <div class="container">
		
      <div class="row">
      	<div class="span6">
      		<form class="well" action="LoginUsuarioServlet" method="post">
      			<legend>Usuarios Registrados</legend>
      			
      			<%
      			ArrayList<String> errors = (ArrayList<String>)request.getAttribute("ERRORS");
      			boolean flagerror = false;
      			String classerror = "";
      				
      			if(errors!=null){
      				if(errors.size()>=1){
      					flagerror = true;
      					classerror = "error";
      				}
      			}
      			
      			if(flagerror){
      			%>
      			<div class="alert alert-error" id="msg_loginalert">
			        <a class="close">×</a>
			        <strong>Error</strong>&nbsp;&nbsp;&nbsp;Correo Electrónico o Contraseña Inválido.
			      </div>
			    <% 
      			}
			    %>  
      			<fieldset>
	      			<div class="control-group <%=classerror%>">
					  <label class="control-label" for="txemail">Correo&nbsp;Electrónico&nbsp;:</label>
					  <div class="controls">
					  	<div class="input-prepend">
						  	<span class="add-on"><i class="icon-envelope"></i></span>
						    <input name="txtemail" type="email" class="input-xlarge" id="txemail" placeholder="test@example.com" required>
						    <!-- <p class="help-block">Error Message</p> -->
					    </div>
					  </div>
					</div>
					<div class="control-group <%=classerror%>">
					  <label class="control-label" for="txpass">Contraseña&nbsp;:</label>
					  <div class="controls">
					  	<div class="input-prepend">
					  		<span class="add-on"><i class="icon-lock"></i></span>
						    <input name="txtpassword" type="password" class="input-xlarge" id="txpass" placeholder="Password" required>
						    <!-- <p class="help-block">Error Message</p> -->
						    <!-- <span class="help-inline">Please correct the error</span> -->
					    </div>
					  </div>
					</div>
					<div class="form-actions">
					  <button type="submit" class="btn btn-primary">Iniciar Sesión</button>
					  <!-- <button type="reset" class="btn">Cancel</button> -->
					</div>
				</fieldset>
      		</form>
      	</div>
      	<div class="span6">
      		<form name="frmregistrocli" class="form-horizontal well" action="RegistroClienteServlet" method="post">
      			<h4>¿ Nuevo en Karaoke.pe ?</h4>
      			
      			<fieldset>
   					<!-- <div class="alert" id="msg_registro_datos">
				        <a class="close">×</a>
				        <div><strong>Error</strong>&nbsp;&nbsp;&nbsp;Correo Electrónico o Contraseña Inválido.</div>
			      	</div> -->
			      	<%
					JsonResult mensaje = (JsonResult)request.getAttribute("MSG_REGISTER");
					Cliente cli = (Cliente)request.getAttribute("CLIENTE");
					String nombres = "";
					String paterno = "";
					String materno = "";
					String dni = "";
					String telefono = "";
					String correo = "";
					String clave = "";
					
			      	if(cli!=null){
			      		nombres = cli.getNombres();
			    		paterno = cli.getPaterno();
			    		materno = cli.getMaterno();
			    		dni = cli.getDni();
			    		telefono = cli.getTelefono();
			    		correo = cli.getCorreo();
			    		clave = cli.getClave();
			      	}
					
					if(mensaje!=null){
					%>
					<div class="alert <%= mensaje.getClaseMsg() %>" id="msg_registro_usuario">
				        <a class="close">×</a>
				        <div><%= mensaje.getMensaje() %></div>
			      	</div>
			      	<%
					}
			      	%>
	      			<legend class="MB0">Datos</legend>
	      			
	      			<div class="control-group">
					 <label class="control-label" for="txnombres">Nombres&nbsp;:</label>
					 <div class="controls">
					   <input name="txtnombres" type="text" id="txnombres" placeholder="Nombres" required value="<%=nombres%>">
					   <!-- <p class="help-inline">Woohoo!</p> -->
					  </div>
					</div>
					<div class="control-group">
					 <label class="control-label" for="txappaterno">Apellido Paterno&nbsp;:</label>
					 <div class="controls">
					   <input name="txtappaterno" type="text" id="txappaterno" placeholder="Ap.Paterno" required value="<%=paterno%>">
					  </div>
					</div>
					<div class="control-group">
					 <label class="control-label" for="txapmaterno">Apellido Materno&nbsp;:</label>
					 <div class="controls">
					   <input name="txtapmaterno" type="text" id="txapmaterno" placeholder="Ap.Materno" required value="<%=materno%>">
					  </div>
					</div>
					<div class="control-group">
					 <label class="control-label" for="txdni">DNI&nbsp;:</label>
					 <div class="controls">
					   <input name="txtdni" type="text" id="txdni" placeholder="Nro.Documento" maxlength="8" required onkeypress="return validarNumeros(event);" value="<%=dni%>">
					  </div>
					</div>
					<div class="control-group">
					 <label class="control-label" for="txtelefono">Teléfono&nbsp;:</label>
					 <div class="controls">
					   <input name="txttelefono" type="text" id="txtelefono" placeholder="Nro.Telefónico" maxlength="9" required onkeypress="return validarNumeros(event);" value="<%=telefono%>">
					  </div>
					</div>
					
					<legend class="MB0">Usuario</legend>
					
					<div class="control-group">
					 <label class="control-label" for="txemailr">Email&nbsp;:</label>
					 <div class="controls">
					   <input name="txtemailr" type="email" id="txemailr" placeholder="Correo Electrónico" required value="<%=correo%>">
					  </div>
					</div>
					<div class="control-group">
					 <label class="control-label" for="txpassr">Password&nbsp;:</label>
					 <div class="controls">
					   <input name="txtpassr" type="password" id="txpassr" placeholder="Contraseña" required value="<%=clave%>">
					  </div>
					</div>
					<div class="form-actions">
					  <button type="submit" class="btn btn-primary">Registrar Usuario</button>
					</div>
				</fieldset>
      		</form>
      	</div>
      </div>
		
		<script type="text/javascript">
			$("#msg_registro_usuario").find("a.close").click(function(){ $(this).fadeOut("fast"); });
		</script>
		
	  <%@include file="footer.jsp" %>

    </div> <!-- /container -->

    <%@include file="lejavascript.jsp" %>
	
</body>
</html>